<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ActionSheet弹出菜单</title>
    <link rel="stylesheet" href="../src/sea-ui.css">
</head>
<body>
    <div class="sea-content">
      <h1 class="sea-panel-title">ActionSheet弹出式菜单</h1>
      <div class="sea-panel-body">
          <a class="sea-btn" id="show-as-btn">显示弹出式菜单</a>
      </div>
    </div>
    <div class="sea-action-sheet">
        <div class="sea-mask"></div>
        <div class="sea-action-sheet-wrap">
            <div class="sea-action-sheet-header">
                <h1 class="sea-action-sheet-title">您需要做什么操作?</h1>
            </div>
            <div class="sea-action-sheet-body">
                <a class="sea-action-sheet-menu">收藏</a>
                <a class="sea-action-sheet-menu">关注</a>
                <a class="sea-action-sheet-menu">分享</a>
            </div>
            <div class="sea-action-sheet-footer">
                <a class="sea-action-sheet-menu" id="hide-as-btn">取消</a>
            </div>
        </div>
    </div>
    <script>
        {
            // 弹出菜单
            document.querySelector('#show-as-btn').onclick = (e) => {
                document.querySelector('.sea-action-sheet').classList.add('show');
            }
            // 收回菜单
            document.querySelector('#hide-as-btn').onclick = (e) => {
                document.querySelector('.sea-action-sheet').classList.remove('show');
            }
        };
    </script>
</body>
</html>